<template>
	<div style="line-height: 2.7;padding: 15px">
		<div class="box">
			<el-row style="text-align: center">
				<el-col><span style="font-size: 1.5em;font-weight: bold">{{ viewData.sxbt }}</span></el-col>
			</el-row>
			<el-row style="line-height: 2">
				<el-col :span="12"><p>{{viewData.xdbm||'无'}}</p></el-col>
				<el-col :span="12"><span style="float: right">{{ viewData.xdrq}}</span></el-col>
			</el-row>
		</div>
		<div class="box">
			<el-row>
				<label>事项性质：</label>
				<div style="display: inline" v-for="dic in sxxzDics" v-if="dic.dictValue==viewData.sxxz">
					{{dic.dictLabel}}
				</div>
			</el-row>
      <el-row>
				<label>事项类型：</label>
				<div style="display: inline" v-for="dic in sxlxDics" v-if="dic.dictValue==viewData.sxlx">
					{{dic.dictLabel}}
				</div>
			</el-row>
			<el-row>
				<label>紧急程度：</label>
				<div style="display: inline" v-for="dic in jjcdDics" v-if="dic.dictValue==viewData.jjcd">
					{{dic.dictLabel}}
				</div>
			</el-row>
			<el-row>
				<label>是否反馈：</label>
				<div style="display: inline" v-for="dic in sffkDics" v-if="dic.dictValue==viewData.sffk">
					{{dic.dictLabel}}
				</div>
			</el-row>
			<el-row>
				<label>截止日期：</label>
				<div style="display: inline" :class="{colorHong:viewData.cqts>0}">
					<span>{{ viewData.jzrq}}</span>
					<span style="margin-left: 10px;" v-if="viewData.cqts>0">超期{{ viewData.cqts}}天</span>
				</div>
			</el-row>
			<el-row>
				<label>下达人：</label>
				<span>{{ viewData.xdr}}</span>
			</el-row>
			<el-row>
				<label>联系电话：</label>
        <span @click="makePhoneCall(viewData.lxdh)" style="color: #003cff">{{ viewData.lxdh}}</span>
        <i style="color: #003cff;" class="el-icon-phone"></i>
			</el-row>
		</div>
		<div class="box">
			<el-row>
				<label>相关文件：</label>
				<el-link icon="el-icon-document-remove" style="display: block;color: #577cfa"
					v-for=" img in fileListView " :href="img.wjdz" target="_blank" :download="img.wjmc">
					{{ img.wjmc}}
				</el-link>
			</el-row>
		</div>
    <div>
      <el-row>
        <label>下达内容</label>
        <uni-easyinput  autoHeight  type="textarea"  v-model="viewData.xdnr"/>
      </el-row>
    </div>
    <div style="height: 50px;margin-top: 20rpx">
      <uni-row>
        <uni-col style="text-align: center" :span="sffk==1?8:12"><span>下达：{{ viewData.xdsl }}</span></uni-col>
        <uni-col style="text-align: center" :span="sffk==1?8:12"><span>已下达：{{ viewData.yxdsl }}</span></uni-col>
        <uni-col style="text-align: center" :span="8" v-show="sffk==1"><span>未反馈：{{ viewData.wfk }}</span>
        </uni-col>
      </uni-row>
    </div>
    <div style="height: 50px;margin-bottom: 20rpx;">
      <uni-row>
        <uni-col style="text-align: center" :span="sffk==1?8:12"><span style="color: #bd3225">未读：{{
            viewData.wdsl
          }}</span></uni-col>
        <uni-col style="text-align: center" :span="sffk==1?8:12"><span style="color: #1087fa">已读：{{
            viewData.ydsl
          }}</span></uni-col>
        <uni-col style="text-align: center" :span="8" v-show="sffk==1"><span
            style="color: #577823">已反馈：{{ viewData.yfk }}</span></uni-col>
      </uni-row>
    </div>
		<el-button @click="toList()" type="primary" round style="width: 100%;">查看详细 > > ></el-button>
	</div>

</template>

<script>
	import { getRwbInfo } from "@/api/system/xdwj";
	import { getToken } from "@/utils/auth";
	import { getDicts } from "@/api/system/dict/data";
	import config from '@/config';
	export default {
		name: "ckRwxx",
		data() {
			return {
        sffk: '1',
				sxxzDics: [],
				sxlxDics: [],
				sffkDics: [],
				jjcdDics: [],
				fkztDics: [],
        intervalId: null,
				viewData: {},
				fileListView: [],
				sid: "",
				viewTxlPageParams: {
					total: 0,
					page: 1,
					limit: 10
				}
			}
		},
		onLoad(options) {
			this.sid = options.sid;
		},
		created() {
			// 字典翻译
			getDicts("sxxz").then(response => {
				this.sxxzDics = response.data;
			});
      getDicts("sxlx").then(response => {
				this.sxlxDics = response.data;
			});
			getDicts("sffk").then(response => {
				this.sffkDics = response.data;
			});
			getDicts("jjcd").then(response => {
				this.jjcdDics = response.data;
			});
			getDicts("fkzt").then(response => {
				this.fkztDics = response.data;
			});
      this.getRwbInfo();
		},
    onShow() {
       this.intervalId = setInterval(() => {
        this.getRwbInfo();
      }, 10000);
    },
    onHide() {
      this.clearInterval();
    },
    onUnload() {
      this.clearInterval();
    },
		methods:{
      makePhoneCall(tel){
        uni.makePhoneCall({
          phoneNumber: tel //仅为示例
        });
      },
      clearInterval(){
        if (this.intervalId) {
          clearInterval(this.intervalId);
          this.intervalId = null;
        }
      },
      getRwbInfo(){
        getRwbInfo({sid: this.sid}).then(res => {
          this.viewData = res.data;
          if (res.data && res.data.sffk) {
            this.sffk = res.data.sffk;
          }
          this.fileListView = res.data.fjbs;
          if (this.viewData.yxdsl == this.viewData.xdsl){
            this.clearInterval();
          }
        });
      },
			toList(){
				this.$tab.navigateTo("/pages/home/through/ckList?sid=" + this.sid);
			}
		}
	}
</script>

<style scoped>

	page {
		background-color: #ffffff;
	}

	.box {
		border-bottom: solid #999696 1px;
	}

	label {
		margin-right: 5px;
	}

	.colorHong {
		color: red;
	}
</style>
